<template>
    <el-container style="width: 100%;height:30px">
        <el-header>
            <!-- 用户管理-->
            <el-dropdown style="float: right;line-height: 33px;">
                <span class="el-dropdown-link" >
                    <el-badge >
                        <i class="icon-user" style="color: rgb(240, 151, 0);"></i> {{$store.state.userStore.user.username}}<i
                        class="el-icon-arrow-down el-icon&#45;&#45;right"></i>
                    </el-badge>
                  </span>
                <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item><span @click="onUserDialog()"><i class="icon-user"></i> 我的信息 </span>
                    </el-dropdown-item>
                    <el-dropdown-item><span @click="onPassDialog()"><i class="icon-calendar"></i> 修改密码</span>
                    </el-dropdown-item>
                    <el-dropdown-item><span @click="loginOut()"><i class="icon-key"></i>注销</span>
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown >
            <div style="float: right;z-index: 1000;line-height: 30px;margin-right: 2%">
                        <span style="font-size: 12px;line-height: 33px;font-weight:bold;">当前登录为：<span
                                style="color: #F09700"> {{$store.state.routeStore.depart.deptName}}</span></span>
                <el-button size="mini" round @click="onDepartment()" style="line-height: 7px">切换登录科室</el-button>
            </div>
            <el-dropdown style="float: right;margin-right: 2%;font-size: 12px;line-height: 33px;font-weight:bold;">
                  <span class="el-dropdown-link" style="color: #F09700" >
                      {{$store.state.routeStore.routeData.name}}<i class="el-icon-arrow-down el-icon--right"></i>
                  </span>
                <el-dropdown-menu slot="dropdown" >
                    <el-dropdown-item v-for="(depart,index) in $store.state.routeStore.routeFuncsList" :key="index" @click.native ="onRouteFuncs(depart)">
                            <img
                            :src="'../../static/img/icon/'+depart.icon+'.png'"/> {{depart.name}}
                    </el-dropdown-item>
                </el-dropdown-menu>
            </el-dropdown>
        </el-header>

        <el-header>
            <div class="page-logo">
                <template>
                    <el-menu router class="el-menu-vertical-demo" mode="horizontal" active-text-color="#409EFF">
                        <a href="index.html"><img src="static/img/logo.eb10e483.png" style="float: left;margin-top:1%"
                                                  height="32px"
                                                  width="121px"/></a>
                        <el-submenu v-for="(routeObj,index) in $store.state.routeStore.systemRoute[$store.state.routeStore.routeData.id].childs"
                                    :key="index"
                                    :index="routeObj.path"
                                    v-if="routeObj.childs.length > 0">
                            <template slot="title">{{routeObj.navColumnName}}</template>
                            <el-menu-item v-for="(secondRoute,index) in routeObj.childs"
                                          :key="index"
                                          :route={path:secondRoute.path,query:{_k:onRandomStr()}}
                                          :index="secondRoute.path">
                                {{secondRoute.childColumnName}}
                            </el-menu-item>
                        </el-submenu>
                        <el-menu-item v-for="(routeObj,index) in $store.state.routeStore.systemRoute[$store.state.routeStore.routeData.id].childs"
                                      :key="index"
                                      :index="routeObj.path"
                                      :route="{path:routeObj.path,query:{_k:onRandomStr()}}"
                                      v-if="routeObj.childs.length === 0">{{routeObj.navColumnName}}</el-menu-item>
                    </el-menu>
                </template>
                <!--  切换科室弹窗-->
                <template>
                    <element-dialog :depart="department.visible" :departData="$store.state.routeStore.departList"></element-dialog>
                </template>
                <!-- 主要功能部分,同时keepAlive实现页面缓存-->
                <keep-alive>
                    <router-view></router-view>
                </keep-alive>
            </div>
        </el-header>
        <template>
            <el-dialog title="我的信息" :visible.sync="userDialog.visible" width="36%">
                <el-form :model="$store.state.userStore.user" label-position="right" label-width="80px" size="mini" disabled>
                    <el-form-item label="姓名" prop="name" placeholder="">
                        <el-input v-model="$store.state.userStore.user.name" style="width:400px" placeholder="姓名"></el-input>
                    </el-form-item>
                    <el-form-item label="员工号" prop="userId" placeholder="">
                        <el-input v-model="$store.state.userStore.user.EmployeeNumber" style="width:400px"
                                  placeholder="员工号"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号" prop="mobile" placeholder="">
                        <el-input v-model="$store.state.userStore.user.mobile" style="width:400px" placeholder="手机号"></el-input>
                    </el-form-item>
                    <el-form-item label="邮箱" prop="email" placeholder="">
                        <el-input v-model="$store.state.userStore.user.email" style="width:400px" placeholder="邮箱"></el-input>
                    </el-form-item>
                </el-form>
            </el-dialog>
            <el-dialog title="修改密码" :visible.sync="passDialog.visible" width="36%">
                <el-form :model="passDialog.data" label-position="right" label-width="100px" ref="passRef" size="mini"
                         :rules="passDialog.rules">
                    <el-form-item label="登录密码" prop="oldPassword">
                        <el-input v-model="passDialog.data.oldPassword" style="width:400px"
                                  placeholder="登录密码"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPassword">
                        <el-input v-model="passDialog.data.newPassword" style="width:400px"
                                  placeholder="新密码"></el-input>
                    </el-form-item>
                    <el-form-item label="确认新密码" prop="checkPassword">
                        <el-input v-model="passDialog.data.checkPassword" style="width:400px"
                                  placeholder="确认新密码"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-tooltip class="item" effect="dark" content="提交按钮" placement="bottom">
                            <el-button @click="onEditPassword" icon="el-icon-check" title="提交"
                                   circle></el-button>
                        </el-tooltip>
                    </el-form-item>
                </el-form>
            </el-dialog>
        </template>
    </el-container>
</template>
<script src="../assets/js/homePage.js">

</script>
